<template>
          <!--  header  -->
          <div  class="nav-container  page-component">
                  <!--左侧导航  #start  -->
                  <div  class="nav  left-nav">
                          <div  class="nav-item  ">
                                  <span  class="v-link  clickable  dark"  onclick="javascript:window.location='/user'">实名认证  </span>
                          </div>
                          <div  class="nav-item  ">
                                  <span  class="v-link  clickable  dark"  onclick="javascript:window.location='/order'">  挂号订单  </span>
                          </div>
                          <div  class="nav-item  selected">
                                  <span  class="v-link  selected  dark"  onclick="javascript:window.location='/patient'">  就诊人管理  </span>
                          </div>
                          <div  class="nav-item  ">
                                  <span  class="v-link  clickable  dark">  修改账号信息  </span>
                          </div>
                          <div  class="nav-item  ">
                                  <span  class="v-link  clickable  dark">  意见反馈  </span>
                          </div>
                  </div>
                  <!--  左侧导航  #end  -->
                  <!--  右侧内容  #start  -->
                  <div  class="page-container">
                  <div  class="personal-patient">
                          <div  class="header-wrapper">
                                  <div  class="title">  添加就诊人</div>
                          </div>
                  <div>
                  <div  class="sub-title">
                  <div  class="block"></div>
                                          就诊人信息
                  </div>
                  <div  class="content-wrapper">
                          <el-form  :model="patient"  label-width="110px"  label-position="left"  ref="patient"  :rules="validateRules">
                          <el-form-item  prop="name"  label="姓名：">
                                  <el-input  v-model="patient.name"  placeholder="请输入真实姓名全称"  class="input  v-input"/>
                          </el-form-item>
                          <el-form-item  prop="certificatesType"  label="证件类型：">
                                  <el-select  v-model="patient.certificatesType"  placeholder="请选择证件类型"  class="v-select  patient-select">
                                          <el-option
                                                  v-for="item  in  certificatesTypeList"
                                                  :key="item.value"
                                                  :label="item.name"
                                                  :value="item.value">
                                          </el-option>
                                  </el-select>
                          </el-form-item>
                          <el-form-item  prop="certificatesNo"  label="证件号码：">
                                  <el-input  v-model="patient.certificatesNo"  placeholder="请输入证件号码"  class="input  v-input"/>
                          </el-form-item>
                          <el-form-item  prop="sex"  label="性别：">
                                  <el-radio-group  v-model="patient.sex">
                                  <el-radio  :label="1">男</el-radio>
                                  <el-radio  :label="0">女</el-radio>
                                  </el-radio-group>
                          </el-form-item>
                          <el-form-item  prop="birthdate"  label="出生日期：">
                                  <el-date-picker
                                          v-model="patient.birthdate"
                                          class="v-date-picker"
                                          type="date"
                                          placeholder="选择日期">
                                  </el-date-picker>
                          </el-form-item>
                          <el-form-item  prop="phone"  label="手机号码：">
                                  <el-input  v-model="patient.phone"  placeholder="请输入手机号码"  maxlength="11"  class="input  v-input"/>
                          </el-form-item>
                          </el-form>
                  </div>
                  <div  class="sub-title">
                          <div  class="block"></div>
                                  建档信息（完善后部分医院首次就诊不排队建档）
                  </div>
                  <div  class="content-wrapper">
                          <el-form  :model="patient"  label-width="110px"  label-position="left"  ref="patient"  :rules="validateRules">
                                  <el-form-item  prop="isMarry"  label="婚姻状况：">
                                          <el-radio-group  v-model="patient.isMarry">
                                                  <el-radio  :label="0">未婚</el-radio>
                                                  <el-radio  :label="1">已婚</el-radio>
                                          </el-radio-group>
                                  </el-form-item>
                          <el-form-item  prop="isInsure"  label="自费/医保：">
                                  <el-radio-group  v-model="patient.isInsure">
                                          <el-radio  :label="0">自费</el-radio>
                                          <el-radio  :label="1">医保</el-radio>
                                  </el-radio-group>
                          </el-form-item>
                          <el-form-item  prop="addressSelected"  label="当前住址：">
                                  <el-cascader
                                          ref="selectedShow"
                                          v-model="patient.addressSelected"
                                          class="v-address"
                                          :props="props"></el-cascader>
                          </el-form-item>
                          <el-form-item  prop="address"  label="详细地址：">
                                  <el-input  v-model="patient.address"  placeholder="应公安机关要求，请填写现真实住址"  class="input  v-input"/>
                          </el-form-item>
                          </el-form>
                  </div>
                  <div  class="sub-title">
                          <div  class="block"></div>
                                          联系人信息（选填）
                  </div>
                  <div  class="content-wrapper">
                          <el-form  :model="patient"  label-width="110px"  label-position="left">
                                  <el-form-item  prop="contactsName"  label="姓名：">
                                          <el-input  v-model="patient.contactsName"  placeholder="请输入联系人姓名全称"  class="input  v-input"/>
                                  </el-form-item>
                                  <el-form-item  prop="contactsCertificatesType"  label="证件类型：">
                                          <el-select  v-model="patient.contactsCertificatesType"  placeholder="请选择证件类型"  class="v-select  patient-select">
                                                  <el-option
                                                          v-for="item  in  certificatesTypeList"
                                                          :key="item.value"
                                                          :label="item.name"
                                                          :value="item.value">
                                                  </el-option>
                                          </el-select>
                                  </el-form-item>
                                  <el-form-item  prop="contactsCertificatesNo"  label="证件号码：">
                                          <el-input  v-model="patient.contactsCertificatesNo"  placeholder="请输入联系人证件号码"  class="input  v-input"/>
                                  </el-form-item>
                                  <el-form-item  prop="contactsPhone"  label="手机号码：">
                                          <el-input  v-model="patient.contactsPhone"  placeholder="请输入联系人手机号码"  class="input  v-input"/>
                                  </el-form-item>
                          </el-form>
                  </div>
                  </div>
                  <div    class="bottom-wrapper">
                          <div    class="button-wrapper">
                                  <div  class="v-button"  @click="saveOrUpdate()">{{  submitBnt  }}</div>
                          </div>
                  </div>
                  </div>
                  </div>
                  <!--  右侧内容  #end  -->
          </div>
          <!--  footer  -->
</template>
<script>
import  '~/assets/css/hospital_personal.css'
import  '~/assets/css/hospital.css'
import  '~/assets/css/personal.css'
import  dictApi  from  '@/api/dict'
import  patientApi  from  '@/api/patient'
const  defaultForm  =  {
  name:  '',
  certificatesType:  '',
  certificatesNo:  '',
  sex:  1,
  birthdate:  '',
  phone:  '',
  isMarry:  0,
  isInsure:  0,
  provinceCode:  '',
  cityCode:  '',
  districtCode:  '',
  addressSelected:  null,
  address:  '',
  contactsName:  '',
  contactsCertificatesType:  '',
  contactsCertificatesNo:  '',
  contactsPhone:  '',
  param:  {}
}
export  default  {
  data()  {
    return  {
      patient:  defaultForm,
      certificatesTypeList:  [],
      props:  {
        lazy:  true,
        async  lazyLoad  (node,  resolve)  {
          const  {  level  }  =  node
          //异步获取省市区
          dictApi.findByParentId(level  ?  node.value  :  '86').then(response  =>  {
            let  list=  response.data
            let  provinceList  =  list.map((item,  i)  =>  {
              return  {
                value:  item.id,
                label:  item.name,
                leaf:  node.level  ==  2  ?  true  :  false,//可控制显示几级
              }
            })
            resolve  &&  resolve(provinceList)
          })
        }
      },
      submitBnt:  '保存',
      validateRules:  {
        name:  [{  required:  true,  trigger:  'blur',  message:  '必须输入'  }],
        certificatesType:  [{  required:  true,  trigger:  'blur',  message:  '必须输入'  }],
        certificatesNo:  [{  required:  true,  trigger:  'blur',  message:  '必须输入'  }],
        birthdate:  [{  required:  true,  trigger:  'blur',  message:  '必须输入'  }],
        phone:  [{  required:  true,  trigger:  'blur',  message:  '必须输入'  }],
        addressSelected:  [{  required:  true,  trigger:  'blur',  message:  '必须输入'  }],
        address:  [{  required:  true,  trigger:  'blur',  message:  '必须输入'  }]
      }
    }
  },
  created()  {
    this.init();
  },
  mounted()  {
    if  (this.$route.query.id)  {
      setTimeout(()=>{
        this.$refs.selectedShow.presentText  =  this.patient.param.provinceString  +  '/'  +  this.patient.param.cityString  +  '/'  +this.patient.param.districtString  //"北京市/市辖区/西城区";//  首次手动复制
        //  this.$refs.selectedShow.value  =  '110000/110100/110102';
      },1000)
    }
  },
  methods:  {
    init()  {
      if  (this.$route.query.id)  {
        const  id  =  this.$route.query.id
        this.fetchDataById(id)
      }  else  {
        //  对象拓展运算符：拷贝对象，而不是赋值对象的引用
        this.patient  =  {  ...defaultForm  }
      }
      this.getDict()
    },

    fetchDataById(id)  {
      patientApi.getById(id).then(response  =>  {
        this.patient  =  response.data
        //添加默认值
        this.patient.addressSelected  =  [this.patient.provinceCode,  this.patient.cityCode,  this.patient.districtCode]
      })
    },
    getDict()  {
      dictApi.findByDictCode("CertificatesType").then(response  =>  {
        this.certificatesTypeList  =  response.data
      })
    },

    saveOrUpdate()  {
      this.$refs.patient.validate(valid  =>  {
        if  (valid)  {
          //地址处理
          if(this.patient.addressSelected.length  ==  3)  {
            this.patient.provinceCode  =  this.patient.addressSelected[0]
            this.patient.cityCode  =  this.patient.addressSelected[1]
            this.patient.districtCode  =  this.patient.addressSelected[2]
          }
          if  (!this.patient.id)  {
            this.saveData()
          }  else  {
            this.updateData()
          }
        }
      })
    },
    //  新增
    saveData()  {
      if(this.submitBnt  ==  '正在提交...')  {
        this.$message.info('重复提交')
        return
      }
      this.submitBnt  =  '正在提交...'
      patientApi.save(this.patient).then(response  =>  {
        this.$message.success("提交成功")
        window.location.href  =  '/patient'
      }).catch(e  =>  {
        this.submitBnt  =  '保存'
      })
    },
    //  根据id更新记录
    updateData()  {
      if(this.submitBnt  ==  '正在提交...')  {
        this.$message.info('重复提交')
        return
      }
      this.submitBnt  =  '正在提交...'
      patientApi.updateById(this.patient).then(response  =>  {
        this.$message.success("提交成功")
        window.location.href  =  '/patient'
      }).catch(e  =>  {
        this.submitBnt  =  '保存'
      })
    }
  }
}
</script>
<style>
    .header-wrapper  .title  {
          font-size:  16px;
          margin-top:  0;
      }
    .sub-title  {
          margin-top:  0;
      }
    .bottom-wrapper{
          padding:  0;
          margin:  0;
      }
    .bottom-wrapper  .button-wrapper{
          margin-top:  0;
      }
</style>
